<template>
  <div class="login">
    <div class="top">
      <img src="../../assets/img/logos.png" alt="" class="logoImg" />
      <img
        src="../../assets/img/login.png"
        alt=""
        class="loginImg"
        @click="goHome"
      />
    </div>
    <div class="center">
      <div class="loginItem">
        <el-tabs v-model="activeName" stretch>
          <el-tab-pane label="账户登录" name="first">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model.number="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm()">登录</el-button>
              </el-form-item>
              <img src="../../assets/img/qq.png" alt="" class="qqImg" />
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="扫码登录" name="second"
            ><img src="../../assets/img/rwm.png" alt="" class="rwmImg"
          /></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="bottom">
      <img src="../../assets/img/bot.png" alt="" class="botImg" />
    </div>
  </div>
</template>

<script>
export default {
  name: "loginView",
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
      setTimeout(() => {
        callback();
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      activeName: "first",
      ruleForm: {
        password: "123456",
        username: "xiaotuxian001",
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: checkAge, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$api.Login().then((res) => {
        console.log(res);
        this.$store.commit("setuser", JSON.stringify(res.data.result.token));
        this.$store.commit(
          "setusername",
          JSON.stringify(res.data.result.account)
        );
        this.$router.push("/");
      });
    },
    goHome() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  width: 100%;
  height: 200px;
  //   background: pink;
  .logoImg {
    width: 400px;
    height: 150px;
    margin: 20px 680px 0 100px;
  }
  .loginImg {
    width: 160px;
    height: 30px;
    margin: 120px;
  }
}
.center {
  width: 100%;
  height: 500px;
  background: url(../../assets/img/bg.png) no-repeat;
  position: relative;
  .loginItem {
    width: 370px;
    height: 400px;
    background: #fff;
    position: absolute;
    top: 50px;
    right: 270px;
  }
}
.qqImg {
  width: 300px;
  height: 25px;
  margin-left: 50px;
}
.botImg {
  margin: 20px 0 0 500px;
}
.el-form {
  margin: 30px 0 0 -20px;
  width: 350px;
}
.el-button {
  width: 290px;
  margin-left: -40px;
}
.qqImg {
  width: 270px;
  height: 30px;
}
.rwmImg {
  width: 200px;
  height: 200px;
  margin: 40px 85px;
}
</style>